<template>
  <div class="storerm">
    <IEcharts
      :loading="loading"
      :option="pie"
      @ready="onReady"
    />
  </div>
</template>

<style>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .storerm {
    width: 100%;
    height: 200px;
    /*margin: 3px 0;*/
    background: #fff;
  }
</style>

<script type="text/babel">
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    name: 'BarChart',
    components: {
      IEcharts
    },
    props: [
      'firstcostKeys',
      'firstcostVals',
      'type',
      'codes'
    ],
    data() {
      let that = this;
      return {
        loading: true,
        pie: {
          title: {
            text: '生产成本',
            textStyle: {
              fontSize: 14,
              fontWeight: 100,
            },
            top: 5
          },
          tooltip: {
            trigger: 'item',
            // alwaysShowContent: true,
            confine: true,
            //formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter:function(params){
                return params.name + ': ' + params.value + ' 元';
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 45
            },
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [],
            type: 'bar',
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A' ];
                  return colorList[params.dataIndex]
                }
              }
            },
          }]

        },
        instance: ''
      }
    },
    created() {
    },
    mounted() {
      console.log('firstcostKeys:', this.firstcostKeys)
      console.log('firstcostVals:', this.firstcostVals)
      this.pie.xAxis.data = this.firstcostKeys;
      this.pie.series[0].data = this.firstcostVals;
    },
    watch: {
      'firstcostVals': function (val) {
        this.pie.xAxis.data = this.firstcostKeys;
        this.pie.series[0].data = this.firstcostVals;
        // let that = this;
        // setTimeout(function () {
        //   that.instance.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,//第几条series
        //     dataIndex: 0,//第几个tooltip
        //   })
        // })
      }
    },
    methods: {
      onReady: function(instance, ECharts) {
        this.loading = false;
        // this.instance = instance;
        // setTimeout(function () {
        //   instance.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,//第几条series
        //     dataIndex: 0,//第几个tooltip
        //   })
        // })

      },
    }
  };
</script>
